<template>
  <div class="article">
    <div class="head animate__animated animate__fadeInDown">
      <img :src="article.cover ? joinUplodUrl(article.cover) : getAssetsFile('auth.jpg')" alt="" />
      <div class="title-box">
        <h2 class="title text-2xl">{{ article.title }}</h2>
        <el-row class="df fd-r ai-c text-sm">
          <span class="xs-w-full df jc-c">
            <span class="iconfont icon-fenlei"></span>
            {{ article.category_name }}
            <span class="line">|</span>
            <span class="iconfont icon-yanjing"></span>
            {{ article.read }}
            <span class="line min-width-hide">|</span>
          </span>
          <span class="xs-w-full df jc-c">
            <span class="iconfont icon-time1"></span>
            发表于{{ dayjs(article.create_time).format('YYYY-MM-DD HH:mm:ss') }}
            <span class="line min-width-hide">|</span>
          </span>
          <span class="xs-w-full df jc-c">
            <span class="iconfont icon-time"></span>
            更新于{{ dayjs(article.update_time).format('YYYY-MM-DD HH:mm:ss') }}
          </span>
        </el-row>
      </div>
    </div>
    <div class="main main-box">
      <previewEditor v-model="article"></previewEditor>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { getAssetsFile, joinUplodUrl } from '@/utils/utils';
  import { getBlogDetail } from '@/apis/article';
  import previewEditor from '@/components/editor/preview-editor.vue';
  import { dayjs } from 'element-plus';
  import { useRoute } from 'vue-router';
  import type { IBlog } from '@/apis/type';
  const $route = useRoute();
  const id = $route.query.id as string;
  const article = ref({} as IBlog);
  const detailFun = async () => {
    const res = await getBlogDetail({ id: id, read: 1 });
    article.value = res.data[0];
  };
  detailFun();
</script>

<style scoped lang="scss">
  .head {
    width: 100%;
    height: 300px;
    position: relative;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .title-box {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 1;
      background-color: var(--bg-color);
      color: var(--text-color);
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      .title {
        margin-bottom: 20px;
      }
    }
  }
  .iconfont {
    margin-right: 5px;
  }
  .line {
    margin: 0 10px;
  }
</style>
